<template>
  <teleport to="body">
    <transition name="fade">
      <div 
        v-if="modelValue" 
        class="celebration-mask" 
        @click.self="handleClose"
      >
        <!-- 背景粒子 -->
        <div 
          v-for="(_, index) in particleCount"
          :key="'particle-' + index"
          class="particle"
          :style="particleStyle"
        ></div>
        
        <!-- 旋转星星 -->
        <div 
          v-for="(star, index) in stars"
          :key="'star-' + index"
          class="star"
          :style="{
            '--star-size': star.size + 'px',
            left: star.x + '%',
            top: star.y + '%',
            animationDelay: star.delay + 's'
          }"
        ></div>

        <div class="celebration-content">
          <!-- 奖杯脉冲光效 -->
          <div class="halo"></div>
          
          <!-- <img 
            :class="['trophy', trophyClass]"
            src="https://q6.itc.cn/q_70/images03/20250307/ba7f40adb1cd41198be8e91602d0437b.gif" 
            alt="奖杯"
          > -->
          
          <h1 class="sort-icon"> {{ sortIcon }} </h1>
          <!-- 庆祝文字 -->
          <h2 class="title animate-text">恭喜您获得&nbsp;&nbsp;<span class="sortNname">{{ title }}</span></h2>
          
          <p class="message animate-text" style="animation-delay: 0.2s">{{ message }}</p>
          
          <el-button 
            type="primary" 
            class="close-btn animate-text"
            style="animation-delay: 0.4s"
            @click="handleClose"
          >
            关闭
          </el-button>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  rank: {
    type: Number,
    default: 1,
    validator: value => value >= 1 && value <= 3
  }
})

const emit = defineEmits(['update:modelValue',"handleColse"])

// 粒子数量
const particleCount = 30

// 星星参数
const stars = ref(
  Array.from({ length: 8 }, () => ({
    size: Math.random() * 20 + 10,
    x: Math.random() * 100,
    y: Math.random() * 100,
    delay: Math.random() * 2
  }))
)

// 粒子样式
const particleStyle = computed(() => ({
  backgroundColor: `hsl(${Math.random() * 360}, 100%, 50%)`,
  left: Math.random() * 100 + 'vw',
  animationDuration: (Math.random() * 3 + 2) + 's',
  animationDelay: Math.random() * 2 + 's'
}))

// 根据排名计算属性
const title = computed(() => {
  const titles = {
    1: '冠军！',
    2: '亚军！',
    3: '季军！'
  }
  return titles[props.rank]
})
const sortIcon = computed(() => {
  const sortIcons = {
    1: '🥇',
    2: '🥈',
    3: '🥉'
  }
  return sortIcons[props.rank]
})
const message = computed(() => {
  const messages = {
    1: '您是第一名，太棒了！',
    2: '您是第二名，非常优秀！',
    3: '您是第三名，继续加油！'
  }
  return messages[props.rank]
})

const trophyClass = computed(() => {
  return {
    'gold-trophy': props.rank === 1,
    'silver-trophy': props.rank === 2,
    'bronze-trophy': props.rank === 3
  }
})
// 定义 emit
const handleClose = () => {

  // emit('update:modelValue', false)
  emit("handleColse")
}
</script>

<style lang="scss" scoped>
.celebration-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  overflow: hidden;
}

.celebration-content {
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  max-width: 500px;
  position: relative;
  transform: scale(0.8);
  transition: transform 0.5s;
  z-index: 1;
  
  &.active {
    transform: scale(1);
  }
}

.title {
  color: var(--el-color-primary);
  font-size: 32px;
  margin-top:84px;
}

.message {
  font-size: 18px;
  margin-bottom: 30px;
  color: #666;
}

.trophy {
  width: 120px;
  height: 150px;
  margin: 0 auto;
  animation: trophy-float 3s ease-in-out infinite;
  
  &.gold-trophy {
    filter: sepia(100%) saturate(500%) hue-rotate(40deg);
  }
  
  &.silver-trophy {
    filter: grayscale(100%) brightness(1.2);
  }
  
  &.bronze-trophy {
    filter: sepia(100%) saturate(500%) hue-rotate(-20deg);
  }
}

.close-btn {
  width: 120px;
}

/* 动画效果 */
.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 3s infinite;
}

.star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 0l3.09 6.26L22 7.27l-5 4.87 1.18 6.88L12 16l-6.18 3.02L7 12.14 2 7.27l6.91-1.01L12 0z"/></svg>');
  animation: star-spin 3s infinite linear;
}

.halo {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
  animation: pulse 2s infinite;
  top: -50%;
  left: -50%;
}

.animate-text {
  opacity: 0;
  animation: text-pop 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* 关键帧动画 */
@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.5);
  }
}

@keyframes star-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.2; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

@keyframes text-pop {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes trophy-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.sortNname{
  font-size:60px;
}
.sort-icon{
  transform:scale(5);
}
</style>